{% extends '__base__.html' %}

{% block title %}用户{% endblock %}

{% block beforehead %}

<script>
function initVM(data) {
    $('#vm').show();
    var vm = new Vue({
        el: '#vm',
        data: {
            users: data.users,
            page: data.page
        }
    });
}
$(function() {
    getJSON('/api/users', {
        page: {{ page_index }}
    }, function (err, results) {
        if (err) {
            return fatal(err);
        }
        $('#loading').hide();
        initVM(results);
    });
});
</script>

{% endblock %}

{% block content %}

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
                <li><a href="/manage/comments">评论</a></li>
                <li><a href="/manage/blogs">日志</a></li>
                <li class="uk-active"><span>用户</span></li>
            </ul>
        </div>
    </div>

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>

    <div id="vm" class="uk-width-1-1">
        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-4-10">名字</th>
                    <th class="uk-width-4-10">电子邮件</th>
                    <th class="uk-width-2-10">注册时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="user: users" >
                    <td>
                        <span v-text="user.name"></span>
                        <span v-if="user.admin" style="color:#d05"><i class="uk-icon-key"></i> 管理员</span>
                    </td>
                    <td>
                        <a v-attr="href: 'mailto:'+user.email" v-text="user.email"></a>
                    </td>
                    <td>
                        <span v-text="user.created_at.toDateTime()"></span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-component="pagination" v-with="page"></div>
    </div>

{% endblock %}